import {
	Button,
	Rating,
	Stack,
	TextField,
	Typography,
	styled,
} from '@mui/material'

import {
	selectProduct,
	selectProductReviews,
} from '../../store/reducers/selectors'
import { useAppDispatch, useAppSelector } from '../../store/hooks'
import { useState } from 'react'
import { fetchAddReview } from '../../store/reducers/slices/productSlice'

const StyledContainer = styled('div')(() => ({
	display: 'flex',
	marginBottom: '10px',
	width: '100%',
	flexDirection: 'column',
}))

const StyledButton = styled(Button)(() => ({
	marginTop: '16px',
	width: '160px',
	height: '40px',
	borderRadius: '55px',
	background: '#FFE44D',
	border: '0px',
	'&': {
		color: '#1A1A1A',
		textTransform: 'none',
	},
}))

const StyledMineReview = styled(Stack)(() => ({
	border: '1px solid',
	borderRadius: '12px',
	padding: '12px',
	gap: '12px',
	margin: '24px 0px 24px 0px',
	background: '#FFEECC',
}))

const StyledReview = styled(Stack)(() => ({
	border: '1px solid',
	borderRadius: '12px',
	padding: '12px',
	gap: '12px',
	margin: '24px 0px 24px 0px',
}))

const Reviews = () => {
	const productReviews = useAppSelector(selectProductReviews)
	const product = useAppSelector(selectProduct)
	const dispatch = useAppDispatch()

	const [mineReviewEnabled, setMineReviewEnabled] = useState(false)
	const [mineReviewRating, setMineReviewRating] = useState(0)
	const [reviewText, setReviewText] = useState('')

	const handleResetReview = () => {
		setMineReviewEnabled(false)
		setMineReviewRating(0)
		setReviewText('')
	}

	const handleAddReview = () => {
		if (product?._id)
			dispatch(
				fetchAddReview({
					productId: product._id,
					review: { rating: mineReviewRating, text: reviewText },
				})
			).then(handleResetReview)
	}

	return (
		<StyledContainer>
			{mineReviewEnabled ? (
				<Stack direction={'row'} spacing={2}>
					<StyledButton variant='outlined' onClick={handleResetReview}>
						<Typography>Отмена</Typography>
					</StyledButton>

					<StyledButton
						variant='outlined'
						disabled={reviewText.length === 0}
						onClick={handleAddReview}
					>
						<Typography>Опубликовать</Typography>
					</StyledButton>
				</Stack>
			) : (
				<StyledButton
					variant='outlined'
					onClick={() => setMineReviewEnabled(true)}
				>
					<Typography>Написать отзыв</Typography>
				</StyledButton>
			)}

			<Stack>
				{mineReviewEnabled && (
					<StyledMineReview>
						<Rating
							name='half-rating-read'
							value={mineReviewRating}
							onChange={(event, newValue) =>
								setMineReviewRating(Number(newValue))
							}
							precision={0.5}
						/>
						<Stack direction={'row'} spacing={2}>
							<Typography>Вы</Typography>
						</Stack>
						<TextField
							multiline
							value={reviewText}
							onChange={(event) => setReviewText(event.target.value)}
						/>
					</StyledMineReview>
				)}
				{productReviews
					?.filter(({ text }) => text.length > 0)
					.sort(
						(a, b) =>
							new Date(b.updated_at).getDate() -
							new Date(a.updated_at).getDate()
					)
					.map((review) => (
						<StyledReview key={review._id}>
							<Rating
								name='half-rating-read'
								value={review.rating}
								precision={0.5}
								readOnly
							/>
							<Stack direction={'row'} spacing={2}>
								<Typography>{review.author.name}</Typography>
								<Typography>
									{new Date(review.updated_at)
										.toLocaleDateString()
										.replaceAll('/', '.')}
								</Typography>
							</Stack>
							<TextField multiline disabled value={review.text} />
						</StyledReview>
					))}
			</Stack>
		</StyledContainer>
	)
}

export default Reviews
